<template>
  <view>
    <view class="start-date">
      <!-- <van-cell title="选择开始日期" :value="date" @click="onDisplay" />
      <van-calendar :show="show" @close="onClose" @confirm="onConfirm" /> -->
      <van-dialog id="van-dialog" />
      <view class="start-date">
        <uni-section :title="'开始日期'" type="line"></uni-section>
        <view class="example-body">
          <uni-datetime-picker
            returnType="timestamp"
            placeholder="请选择开始时间"
            v-model="startDate"
            @change="startDate = $event"
          />
        </view>
      </view>
      <view class="end-date">
        <uni-section :title="'结束日期'" type="line"></uni-section>
        <view class="example-body">
          <uni-datetime-picker
            returnType="timestamp"
            placeholder="请选择结束时间"
            v-model="endDate"
            @change="endDate = $event"
          />
        </view>
      </view>
      <view class="btn">
        <van-toast id="van-toast" />
        <van-button type="primary" @click="handleSub">开始计算</van-button>
      </view>
    </view>
  </view>
</template>

<script>
import Toast from '../../wxcomponents/vant/dist/toast/toast'
import Dialog from '../../wxcomponents/vant/dist/dialog/dialog'
import mixin from "@/mixins/mixins.js";
export default {
  name: 'Date',
  mixins: [mixin],
  data() {
    return {
      startDate: '',
      endDate: ''
    }
  },
  methods: {
    handleSub() {
      // 如果未选时间就点击提示输入时间
      if (this.startDate === '') {
        // Toast.fail('请选择开始时间')
        this.$msg('请选择开始时间')
        return
      } else if (this.endDate === '') {
        // Toast.fail('请选择结束时间')
        this.$msg('请选择结束时间')
        return
      }
      const time = this.endDate - this.startDate // 时间差
      const days =
        parseInt(time / (1000 * 3600 * 24)) < 10
          ? '0' + parseInt(time / (1000 * 3600 * 24))
          : parseInt(time / (1000 * 3600 * 24)) // 天 1000ms 乘 60秒 乘 60分钟
      const hours =
        parseInt(time / (1000 * 3600)) % 24 < 10
          ? '0' + (parseInt(time / (1000 * 3600)) % 24)
          : parseInt(time / (1000 * 3600)) % 24 // 小时  取余 一天24H 得出小时
      const minutes =
        parseInt(time / (1000 * 60)) % 60 < 10
          ? '0' + (parseInt(time / (1000 * 60)) % 60)
          : parseInt(time / (1000 * 60)) % 60 // 分钟  取余 一小时60分钟 得出分钟
      const seconds =
        parseInt(time / 1000) % 60 < 10
          ? '0' + (parseInt(time / 1000) % 60)
          : parseInt(time / 1000) % 60 // 秒  取余  得出秒
      // console.log(typeof hours, 224)
      // 不让开始时间大于结束时间，否则会出现负数
      if (
        (typeof days === 'string' && days.includes('-')) ||
        (typeof hours === 'string' && hours.includes('-')) ||
        (typeof minutes === 'string' && minutes.includes('-')) ||
        (typeof seconds === 'string' && seconds.includes('-'))
      ) {
        // Toast.fail('结束时间不得小于开始时间')
        this.$msg('结束时间不得小于开始时间')
        return
      }
      Dialog.alert({
        title: '时间差',
        message: `结束时间与开始时间共相差${days}天${hours}小时${minutes}分钟${seconds}秒`
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.start-date {
  position: relative;
  .example-body {
    padding: 20rpx;
  }
  .btn {
    position: absolute;
    bottom: -140rpx;
    left: 280rpx;
  }
}
</style>
